<!--播放器的  全屏 -->
<template>
  <div class="normal-player-container">
    <!-- 背景 -->
    <div class="background">
      <img :src="currentSong.al.picUrl" width="100%" height="100%" alt="" />
    </div>
    <!-- 蒙版 -->
    <div class="background layer"></div>
    <!-- 顶部返回界面 -->
    <div class="header">
      <!-- 返回图标 -->
      <div class="back" @click="isback">
        <img
          class="goback"
          width="50px"
          height="50px"
          src="..\..\assets\goback.png"
          alt=""
        />
      </div>
      <div class="title">
        <span> {{ currentSong.name }}</span>
        &nbsp;&nbsp;
        <span class="subtitle">{{ currentSong.ar[0].name }}</span>
      </div>
    </div>
    <!-- 中间唱片的部分 -->
    <div class="middle">
      <div class="CD-wrap">
        <img
          :class="{ pause: !isplay }"
          class="image play"
          width="400px"
          height="400px"
          :src="currentSong.al.picUrl"
          alt=""
        />
      </div>
    </div>
    <!-- 中间的歌词部分 -->
    <div class="middlelrc">
      <ul class="content" ref="lyric" id="lyric">
        <li v-for="(c, index) in currentSongLyric" :key="index">{{ c.c }}</li>
      </ul>
    </div>
    <!-- 底部按键 -->
    <div class="bottom">
      <!-- 播放按钮 -->
      <div>
        <Bartype
          :value="progress"
          @input="changeProgressAction"
          :currentTime="currentTime"
          :duration="duration"
          @mousedown="handleMouseAction('down')"
          @mouseup="handleMouseAction('up')"
        />
      </div>
      <div class="operators">
        <!-- 最左边播放方式 -->
        <div class="icon i-left" @click="changePlayModeAction">
          <img
            v-show="mode == 0"
            width="50px"
            height="50px"
            src="..\..\assets\btnmusic\liebiaoxunhuan.png"
            alt=""
          />
          <img
            v-show="mode == 1"
            width="50px"
            height="50px"
            src="..\..\assets\btnmusic\danquxunhuan.png"
            alt=""
          />
          <img
            v-show="mode == 2"
            width="50px"
            height="50px"
            src="..\..\assets\btnmusic\suiji.png"
            alt=""
          />
        </div>
        <div class="middlebtn">
          <!-- 左边向后 -->
          <div class="icon i-left" @click="preAction">
            <img
              width="50px"
              height="50px"
              src="..\..\assets\btnmusic\kuaitui.png"
              alt=""
            />
          </div>
          <!-- 中间播放暂停 -->
          <div class="icon i-center" @click="playmusic">
            <i v-show="!isplay">
              <img
                width="50px"
                height="50px"
                src="..\..\assets\btnmusic\zanting.png"
                alt=""
              />
            </i>
            <i v-show="isplay">
              <img
                width="50px"
                height="50px"
                src="..\..\assets\btnmusic\bofang.png"
                alt=""
              />
            </i>
          </div>
          <!-- 右边向前 -->
          <div class="icon i-right" @click="nextAction">
            <img
              width="50px"
              height="50px"
              src="..\..\assets\btnmusic\kuaijin.png"
              alt=""
            />
          </div>
        </div>
        <!-- 最右边播放列表 -->
        <div class="icon i-right">
          <el-dropdown @command="handleCommand">
            <img
              width="50px"
              height="50px"
              src="..\..\assets\btnmusic\levellist.png"
              alt=""
            />
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, index) in playList"
                class="sort-item"
                :key="index"
                :command="item.id"
              >
                <span v-text="item.name"></span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import Bartype from "./bar/Bartype";
export default {
  name: "Nomalplay",
  data() {
    return {
      drawer: false,
      lineNo: 0, //当前行
      C_pos: 9, //C位置
      offset: -26, //滚动距离（等于行高）
    };
  },
  props: ["progress", "currentTime", "duration"],
  computed: {
    ...mapState("song", [
      "isplay",
      "currentSong",
      "mode",
      "currentSongLyric",
      "currentID",
    ]),
    ...mapGetters("song", ["playList"]),
  },
  watch: {
    currentTime(newValue) {
      if (this.lineNo == this.currentSongLyric.length) return;
      if (parseFloat(this.currentSongLyric[this.lineNo].t) <= newValue) {
        this.lineHigh(); //高亮当前行
        this.lineNo = this.lineNo + 1;
      }
    },
    duration(newvalue) {
      if (newvalue == this.duration) {
        console.log("i am working");
        document.querySelector("#lyric .lineHigh").removeAttribute("class");
        this.$refs.lyric.style.transform = "translateY(0)";
        this.lineNo = 0;
      }
    },
  },
  components: {
    Bartype,
  },
  methods: {
    handleCommand(command) {
      let perList = this.playList.filter((item) => item.id == command);
      console.log(perList);
      this.$store.commit({
        type: "song/SELECTSONGBYID",
        id: command,
        list: perList[0],
      });
    },
    isback() {
      this.$store.commit("song/GOTONOMAL", false);
    },
    playmusic() {
      this.$store.commit("song/ISPLAYMUSIC", this.isplay);
    },
    //修改进度条
    changeProgressAction(newvalue) {
      //触发父组件的change事件,将数据传给父组件
      this.$emit("change", newvalue);
    },
    //监听鼠标子组件传来的事件
    handleMouseAction(flag) {
      this.$emit("mouseChange", flag);
    },
    //改变播放顺序
    changePlayModeAction() {
      this.$store.commit("song/CHANGEPLAYMODE");
    },

    //mode=0   --播放下一首
    //mode=1   --重新播放
    //mode=2   --随机播放

    //播放上一曲
    preAction() {
      if (this.mode === 1) {
        let nowID = this.currentSong.id; //寻找当前播放歌曲的ID
        let nowIndex = this.playList.findIndex((item) => item.id == nowID); //更具当前播放歌曲的ID寻找index值 -1 就是上一首歌曲的索引位置
        let perList = this.playList[nowIndex]; //找到上一首信息
        let perID = this.playList[nowIndex].id; //找到上一首ID
        this.$store.commit({
          type: "song/SELECTSONGBYID",
          id: perID,
          list: perList,
        });
        this.$store.dispatch({
          type: "song/getSongLyric",
          id: perID,
        });
      }
      if (this.mode === 2) {
        let nowID = this.currentSong.id; //寻找当前播放歌曲的ID
        let nowIndex = this.playList.findIndex((item) => item.id == nowID) - 1; //更具当前播放歌曲的ID寻找index值 -1 就是上一首歌曲的索引位置
        if (nowIndex < 0) {
          nowIndex = this.playList.length - 1;
          let perList = this.playList[nowIndex]; //找到上一首信息
          let perID = this.playList[nowIndex].id; //找到上一首ID
          this.$store.dispatch({
            type: "song/getSongLyric",
            id: perID,
          });
          this.$store.commit({
            type: "song/SELECTSONGBYID",
            id: perID,
            list: perList,
          });
        } else {
          let perList = this.playList[nowIndex]; //找到上一首信息
          let perID = this.playList[nowIndex].id; //找到上一首ID
          this.$store.dispatch({
            type: "song/getSongLyric",
            id: perID,
          });
          this.$store.commit({
            type: "song/SELECTSONGBYID",
            id: perID,
            list: perList,
          });
        }
      } else if (this.mode === 0) {
        let nowID = this.currentSong.id; //寻找当前播放歌曲的ID
        let nowIndex = this.playList.findIndex((item) => item.id == nowID) - 1; //更具当前播放歌曲的ID寻找index值 -1 就是上一首歌曲的索引位置
        if (nowIndex < 0) {
          nowIndex = this.playList.length - 1;
          let perList = this.playList[nowIndex]; //找到上一首信息
          let perID = this.playList[nowIndex].id; //找到上一首ID
          this.$store.dispatch({
            type: "song/getSongLyric",
            id: perID,
          });
          this.$store.commit({
            type: "song/SELECTSONGBYID",
            id: perID,
            list: perList,
          });
        } else {
          let perList = this.playList[nowIndex]; //找到上一首信息
          let perID = this.playList[nowIndex].id; //找到上一首ID
          this.$store.dispatch({
            type: "song/getSongLyric",
            id: perID,
          });
          this.$store.commit({
            type: "song/SELECTSONGBYID",
            id: perID,
            list: perList,
          });
        }
      }
    },
    //播放下一曲
    nextAction() {
      if (this.mode === 1) {
        const nowID = this.currentSong.id; //寻找当前播放歌曲的ID
        let nowIndex = this.playList.findIndex((item) => item.id == nowID); //更具当前播放歌曲的ID寻找index值 -1 就是下一曲歌曲的索引位置
        let perList = this.playList[nowIndex]; //找到下一曲信息
        let perID = this.playList[nowIndex].id; //找到下一曲ID
        this.$store.commit({
          type: "song/SELECTSONGBYID",
          id: perID,
          list: perList,
        });
      }
      if (this.mode === 2) {
        let nowID = this.currentSong.id; //寻找当前播放歌曲的ID
        let nowIndex = this.playList.findIndex((item) => item.id == nowID) + 1; //更具当前播放歌曲的ID寻找index值 -1 就是下一曲歌曲的索引位置
        if (nowIndex >= this.playList.length) {
          nowIndex = 0;
          let perList = this.playList[nowIndex]; //找到下一曲信息
          let perID = this.playList[nowIndex].id; //找到下一曲ID
          this.$store.dispatch({
            type: "song/getSongLyric",
            id: perID,
          });

          this.$store.commit({
            type: "song/SELECTSONGBYID",
            id: perID,
            list: perList,
          });
        } else {
          let perList = this.playList[nowIndex]; //找到上一首信息
          let perID = this.playList[nowIndex].id; //找到上一首ID
          this.$store.dispatch({
            type: "song/getSongLyric",
            id: perID,
          });
          this.$store.commit({
            type: "song/SELECTSONGBYID",
            id: perID,
            list: perList,
          });
        }
      } else if (this.mode === 0) {
        let nowID = this.currentSong.id; //寻找当前播放歌曲的ID
        let nowIndex = this.playList.findIndex((item) => item.id == nowID) + 1; //更具当前播放歌曲的ID寻找index值 -1 就是下一曲歌曲的索引位置
        if (nowIndex >= this.playList.length) {
          nowIndex = 0;
          let perList = this.playList[nowIndex]; //找到下一曲信息
          let perID = this.playList[nowIndex].id; //找到下一曲ID
          this.$store.dispatch({
            type: "song/getSongLyric",
            id: perID,
          });
          this.$store.commit({
            type: "song/SELECTSONGBYID",
            id: perID,
            list: perList,
          });
        } else {
          let perList = this.playList[nowIndex]; //找到上一首信息
          let perID = this.playList[nowIndex].id; //找到上一首ID
          this.$store.dispatch({
            type: "song/getSongLyric",
            id: perID,
          });
          this.$store.commit({
            type: "song/SELECTSONGBYID",
            id: perID,
            list: perList,
          });
        }
      }
    },

    // 歌词行高亮
    lineHigh() {
      var lis = this.$refs.lyric.getElementsByTagName("li"); //歌词数组
      if (this.lineNo > 0) {
        lis[this.lineNo - 1].removeAttribute("class"); //去掉上一行的行高亮显示
      }
      lis[this.lineNo].className = "lineHigh"; //高亮显示当前行
      // console.log(lis[this.lineNo]);
      //文字滚动
      if (this.lineNo > this.C_pos) {
        this.$refs.lyric.style.transform =
          "translateY(" + (this.lineNo - this.C_pos) * this.offset + "px)"; //整体向上滚动一行高度
      }
    },
    //滚回到开头，用于播放结束时
    goback() {},
  },
};
</script>

<style scoped lang="scss">
// 旋转动画
@keyframes rotate {
  0% {
    transform: rotat(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.normal-player-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1200;
  background: #111;
}
.background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.6; //透明效果
  filter: blur(20px); //模糊度
  &.layer {
    background: #aaa;
    opacity: 0.3;
    filter: none;
  }
}
.header {
  position: relative;
  margin-bottom: 50px;
  .back {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .back :hover {
    width: 60px;
    height: 60px;
  }
  .title {
    position: absolute;
    top: 70px;
    left: 70%;
    font-size: 26px;
    color: #fff;
  }
  .subtitle {
    font-size: 16px;
    color: #ced4da;
  }
}
.middle {
  margin-top: 200px;
  margin-left: 200px;
  .CD-wrap {
    .image {
      border-radius: 50%;
      border: 40px solid #111;
      box-shadow: 0 0 5px #ced4da;
      animation: rotate 25s linear infinite; //无限次
      &.pause {
        animation-play-state: paused;
      }
    }
  }
}

// 歌词css
.middlelrc {
  display: block;
  width: 485px;
  height: 575px;
  position: fixed;
  top: 150px;
  right: 250px;
  overflow: hidden;
  font-size: 18px;
  text-align: center;
  background: rgba(248, 249, 250, 0.3);
  border: 2px solid #dee2e6;
  border-radius: 25px;
}
.content {
  margin-right: 40px;
  color: #ced4da;
  font-size: 16px;
}
// 歌词列表
#lyric {
  line-height: 26px; //行高
  transition-duration: 600ms; //滚动时间
}
.lineHigh {
  color: #1d953f;
}

.bottom {
  position: absolute;
  left: 0;
  bottom: 40px;
  width: 100%;
  .operators {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-around;
  }
  .middlebtn {
    width: 210px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-around;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.el-dropdown-menu,el-popper{
  max-height: 300px;
  overflow: auto;
}
</style>